<template>
  <div class="ding-dang-mao-main">
    <div class="wrapper">
      <!--叮当猫整体-->
      <div class="doraemon">
        <!--头部-->
        <div class="head">
          <!--眼睛-->
          <div class="eyes">
            <div class="eye left">
              <!--眼珠-->
              <div class="black bleft"></div>
            </div>
            <div class="eye right">
              <div class="black bright"></div>
            </div>
          </div>
          <!--脸部-->
          <div class="face">
            <!--白色脸底-->
            <div class="white"></div>
            <!--鼻子-->
            <div class="nose">
              <!--鼻子高光部分-->
              <div class="light"></div>
            </div>
            <!--鼻子的竖线-->
            <div class="nose_line"></div>
            <!--嘴巴-->
            <div class="mouth"></div>
            <!--胡须-->
            <div class="whiskers">
              <div class="whisker rTop r160"></div>
              <div class="whisker rMiddle"></div>
              <div class="whisker rBottom r20"></div>
              <div class="whisker lTop r20"></div>
              <div class="whisker lMiddle"></div>
              <div class="whisker lBottom r160"></div>
            </div>
          </div>
        </div>
        <!--脖子和铃铛-->
        <div class="choker">
          <!--铃铛-->
          <div class="bell">
            <div class="bell_line"></div>
            <div class="bell_circle"></div>
            <div class="bell_under"></div>
            <div class="bell_light"></div>
          </div>
        </div>
        <!--身体-->
        <div class="bodys">
          <!--肚子-->
          <div class="body"></div>
          <!--肚兜-->
          <div class="wraps"></div>
          <!--口袋-->
          <div class="pocket"></div>
          <!--遮住一半口袋，使其呈现半圆-->
          <div class="pocket_mask"></div>
        </div>
        <!--右手-->
        <div class="hand_right">
          <!--手臂-->
          <div class="arm"></div>
          <!--手掌-->
          <div class="circle"></div>
          <!--遮住手臂和身子交接处的线-->
          <div class="arm_rewrite"></div>
        </div>
        <!--左手-->
        <div class="hand_left">
          <div class="arm"></div>
          <div class="circle"></div>
          <div class="arm_rewrite"></div>
        </div>
        <!--脚-->
        <div class="foot">
          <div class="left"></div>
          <div class="right"></div>
          <!--双脚之间的缝隙-->
          <div class="foot_rewrite"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'dingDangMao'
}
</script>

<style lang="scss" scoped>
  .ding-dang-mao-main {
    height: 100%;
    .wrapper {
      margin: 70px 0 0 500px;
      .doraemon {
        position: relative;
        .head {
          position: relative;
          width: 320px;
          height: 300px;
          border-radius: 150px;
          background: #07bbee;
          /*background: radial-gradient(right top,#fff 10%,#07bbee 20%,#10a6ce 75%,#000);*/
          /*background: -moz-radial-gradient(right top,#fff 10%,#07bbee 20%,#10a6ce 75%,#000);
          background: -ms-radial-gradient(right top,#fff 10%,#07bbee 20%,#10a6ce 75%,#000);*/
          background: radial-gradient(circle at 312px 13px, #fff 10%, #07bbee 20%, #10A6C9 75%, #000);
          border: 2px solid #555;
          box-shadow: -5px 10px 15px -5px rgba(0, 0, 0, 0.45);
        }
        .face {
          position: relative; /*让所有脸部元素可自由定位*/
          z-index: 2; /*脸在头部背景上面*/
          .white {
            width: 265px; /*设置宽高*/
            height: 195px;
            border-radius: 150px;
            position: absolute; /*进行绝对定位*/
            top: 75px;
            left: 25px;
            background: #fff;
            /*此放射渐变也是使脸的左下角暗一些，看上去更真实*/
            /*background: -webkit-radial-gradient(right top,#fff 75%,#eee 80%,#999 90%,#444);
            background: -moz-radial-gradient(right top,#fff 75%,#eee 80%,#999 90%,#444);
            background: –ms-radial-gradient(right top,#fff 75%,#eee 80%,#999 90%,#444);*/
            /*background: radial-gradient(circle at 10px 10px,#fff 75%,#eee 80%,#999 90%,#444);*/
          }
          .nose {
            width: 30px;
            height: 30px;
            border-radius: 15px;
            background: #c93300;
            border: 2px solid #000;
            position: absolute;
            top: 110px;
            left: 140px;
            z-index: 3; /*鼻子在白色脸底下面*/
            .light {
              width: 10px;
              height: 10px;
              border-radius: 5px;
              box-shadow: 19px 8px 5px #fff; /*通过阴影实现高光*/
            }
          }
          .nose_line {
            width: 3px;
            height: 100px;
            background: #333;
            position: absolute;
            top: 143px;
            left: 156px;
            z-index: 3;
          }
          .mouth {
            width: 220px;
            height: 400px;
            /*通过底边框加上圆角模拟微笑嘴巴*/
            border-bottom: 3px solid #333;
            border-radius: 120px;
            position: absolute;
            top: -160px;
            left: 45px;
          }
        }
        .eyes {
          position: relative;
          z-index: 3; /*眼睛在白色脸底下面*/
          .eye {
            width: 72px;
            height: 82px;
            background: #fff;
            border: 2px solid #000;
            border-radius: 35px 35px;
            position: absolute;
            top: 40px;
            .black {
              width: 14px;
              height: 14px;
              background: #000;
              border-radius: 7px;
              position: absolute;
              top: 40px;
            }
            .bleft {
              left: 50px;
            }
            .bright {
              left: 7px;
            }
          }
          .left {
            left: 82px;
          }
          .right {
            left: 156px;
          }

        }
        .whiskers {
          width: 220px;
          height: 80px;
          background: #fff;
          border-radius: 15px;
          position: absolute;
          top: 120px;
          left: 45px;
          z-index: 2; /*在鼻子和眼睛下面*/
          .whisker {
            width: 60px;
            height: 2px;
            background: #333;
            position: absolute;
            z-index: 2;
          }
          .rTop {
            left: 165px;
            top: 25px;
          }
          .rMiddle {
            left: 167px;
            top: 45px;
          }
          .rBottom {
            left: 165px;
            top: 65px;
          }
          .lTop {
            left: 0;
            top: 25px;
          }
          .lMiddle {
            left: -2px;
            top: 45px;
          }
          .lBottom {
            left: 0;
            top: 65px;
          }
          .r160 {
            transform: rotate(160deg);
          }
          .r20 {
            transform: rotate(200deg);
          }
        }
        .choker {
          width: 230px;
          height: 20px;
          background: #c40;
          /*线性渐变 让围巾看上去更自然*/
          background: -webkit-gradient(linear, left top, left bottom, from(#c40), to(#800400));
          background: -moz-linear-gradient(center top, #c40, #800400);
          background: -ms-linear-gradient(center top, #c40, #800400);
          border: 2px solid #000;
          border-radius: 10px;
          position: relative;
          top: -40px;
          left: 45px;
          z-index: 4;
          .bell {
            width: 40px;
            height: 40px;
            _overflow: hidden; /*IE6 hack*/
            border: 2px solid #000;
            border-radius: 50px;
            background: #f9f12a;
            background: -webkit-gradient(linear, left top, left bottom, from(#f9f12a), color-stop(0.5, #e9e11a), to(#a9a100));
            background: -moz-linear-gradient(top, #f9f12a, #e9e11a 75%, #a9a100);
            background: -ms-linear-gradient(top, #f9f12a, #e9e11a 75%, #a9a100);
            box-shadow: -5px 5px 10px rgba(0, 0, 0, 0.25);
            position: absolute;
            top: 5px;
            left: 90px;
          }
          .bell_line {
            width: 36px;
            height: 2px;
            background: #f9f12a;
            border: 2px solid #333;
            border-radius: 3px 3px 0 0;
            position: absolute;
            top: 10px;
          }
          .bell_circle {
            width: 12px;
            height: 10px;
            background: #000;
            border-radius: 5px;
            position: absolute;
            top: 20px;
            left: 14px;
          }
          .bell_under {
            width: 3px;
            height: 15px;
            background: #000;
            position: absolute;
            left: 18px;
            top: 27px;
          }
          .bell_light {
            width: 12px;
            height: 12px;
            border-radius: 10px;
            box-shadow: 19px 8px 5px #fff;
            position: absolute;
            top: -5px;
            left: 5px;
            opacity: 0.7;
          }
        }
        .bodys {
          position: relative;
          top: -310px;
          .body {
            width: 220px;
            height: 165px;
            background: #07beea;
            background: -webkit-gradient(linear, right top, left top, from(#07beea), color-stop(0.5, #0073b3), color-stop(0.75, #00b0e0), to(#0096be));
            background: -moz-linear-gradient(right center, #07beea, #0073b3 50%, #00b0e0 75%, #0096be 100%);
            background: -ms-linear-gradient(right center, #07beea, #0073b3 50%, #00b0e0 75%, #0096be 100%);
            border: 2px solid #333;
            position: absolute;
            top: 265px;
            left: 50px;
          }
          .wraps {
            width: 170px;
            height: 170px;
            background: #fff;
            background: -webkit-gradient(linear, right top, left bottom, from(#fff), color-stop(0.75, #fff), color-stop(0.83, #eee), color-stop(0.90, #999), color-stop(0.95, #444), to(#000));
            background: -moz-linear-gradient(right top, #fff, #fff 75%, #eee 83%, #999 90%, #444 95%, #000);
            background: -ms-linear-gradient(right top, #fff, #fff 75%, #eee 83%, #999 90%, #444 95%, #000);
            border: 2px solid #000;
            border-radius: 85px;
            position: absolute;
            left: 72px;
            top: 230px;
          }
          .pocket {
            width: 130px;
            height: 130px;
            border-radius: 65px;
            background: #fff;
            background: -webkit-gradient(linear, right top, left bottom, from(#fff), color-stop(0.70, #fff), color-stop(0.75, #f8f8f8), color-stop(0.80, #eee), color-stop(0.88, #ddd), to(#fff));
            background: -moz-linear-gradient(right top, #fff, #fff 70%, #f8f8f8 75%, #eee 80%, #ddd 88%, #fff);
            background: -ms-linear-gradient(right top, #fff, #fff 70%, #f8f8f8 75%, #eee 80%, #ddd 88%, #fff);
            border: 2px solid #000;
            position: absolute;
            top: 250px;
            left: 92px;
          }
          .pocket_mask {
            width: 134px;
            height: 60px;
            background: #fff;
            border-bottom: 2px solid #000;
            position: absolute;
            top: 259px;
            left: 92px;
          }
        }
        .hand_right, .hand_left {
          height: 100px;
          width: 100px;
          position: absolute;
          top: 272px;
          left: 248px;
        }
        .hand_left {
          left: -10px;
          z-index: -1;
          .arm {
            top: 17px;
            background: #0096be; /*背光一面使用纯色，使其有立体感*/
            box-shadow: 5px -7px 10px rgba(0, 0, 0, 0.25);
            -webkit-transform: rotate(145deg);
            -moz-transform: rotate(145deg);
            -ms-transform: rotate(145deg);
            -o-transform: rotate(145deg);
            transform: rotate(145deg);
          }
          .circle {
            left: -20px;
            top: 32px;
          }
          .arm_rewrite {
            top: -45px;
            left: 60px;
            background: #0096be; /*同理，背光一面使用纯色，使其有立体感*/
          }
        }
        .hand_right {
          .arm {
            top: 17px;
            -webkit-transform: rotate(35deg);
            -moz-transform: rotate(35deg);
            -ms-transform: rotate(35deg);
            -o-transform: rotate(35deg);
            transform: rotate(35deg);
          }
          .circle {
            left: 40px;
            top: 32px;
          }
          .arm_rewrite {
            top: -45px;
            left: 22px;
          }
        }
        .arm {
          width: 80px;
          height: 50px;
          background: #07beea;
          background: -webkit-gradient(linear, left top, left bottom, from(#07beea), color-stop(0.85, #07beea), to(#555));
          background: -moz-linear-gradient(center top, #07BEEA, #07BEEA 85%, #555);
          background: -ms-linear-gradient(center top, #07BEEA, #07BEEA 85%, #555);
          border: 1px solid #000000;
          box-shadow: -10px 7px 10px rgba(0, 0, 0, 0.35);
          z-index: -1;
          position: relative;
        }
        .circle {
          width: 60px;
          height: 60px;
          border-radius: 30px;
          border: 2px solid #000;
          background: #fff;
          background: -webkit-gradient(linear, right top, left bottom, from(#fff), color-stop(0.5, #fff), color-stop(0.70, #eee), color-stop(0.8, #ddd), to(#999));
          background: -moz-linear-gradient(right top, #fff, #fff 50%, #eee 70%, #ddd 80%, #999);
          background: -ms-linear-gradient(right top, #fff, #fff 50%, #eee 70%, #ddd 80%, #999);
          position: absolute;
        }
        .arm_rewrite {
          height: 45px;
          width: 5px;
          background: #07beea;
          position: relative;
          z-index: -1;
        }
        .foot {
          width: 280px;
          height: 40px;
          position: relative;
          top: 55px;
          left: 20px;
          .left, .right {
            width: 125px;
            height: 30px;
            background: #fff;
            background: -webkit-gradient(linear, right top, left bottom, from(#fff), color-stop(0.75, #fff), color-stop(0.85, #eee), to(#999));
            background: -moz-linear-gradient(right top, #fff, #fff 75%, #eee 85%, #999);
            background: -ms-linear-gradient(right top, #fff, #fff 75%, #eee 85%, #999);
            border: 2px solid #333;
            border-radius: 80px 60px 60px 40px;
            box-shadow: -6px 0 10px rgba(0, 0, 0, 0.35);
            position: relative;
          }
          .left {
            left: 5px;
            top: 60px;
          }
          .right {
            top: 27px;
            left: 146px;
          }
          .foot_rewrite {
            width: 20px;
            height: 10px;
            background: #fff;
            background: -webkit-gradient(linear, right top, left bottom, from(#666), color-stop(0.83, #fff), to(#fff));
            background: -moz-linear-gradient(right top, #666, #fff 83%, #fff);
            background: -ms-linear-gradient(right top, #666, #fff 83%, #fff);
            /*制作半圆效果*/
            border: 2px solid #000;
            border-bottom: none;
            border-radius: 40px 40px 0 0;
            position: relative;
            top: -11px;
            left: 130px;
            _left: 127px;
          }
        }
      }
    }
  }
</style>
